<template>
	<footer class="footer">
		<span class="todo-count"><strong>{{sum}}</strong> 条</span>
		<ul class="filters">
			<li><a @click="fileterData(0)" :class="{selected:selIndex==0}" href="#/">所有</a></li>
			<li><a @click="fileterData(1)" :class="{selected:selIndex==1}" href="#/active">进行中</a></li>
			<li><a @click="fileterData(2)" :class="{selected:selIndex==2}" href="#/completed">完成</a></li>
		</ul>
		<button class="clear-completed" @click="clear">清除完成事项</button>
	</footer>
</template>

<script>
	export default{
		data(){
			return{
				selIndex:0
			}
		},
		props:{
			sum:{
				type:Number,
				default:0
			}
		},
		methods:{
			clear(){
				this.$emit("clear")
			},
			fileterData(index){
				this.selIndex = index
				this.$emit("screening",index)
			}
		}	
	}
</script>

<style>
</style>
